import QtQuick 2.12
import QtQuick.Window 2.12
/*
  Canvas图像处理
  在Canvas元素上绘制图形,通常发生在onPaint信号处理函数中，在这个函数中可以通过获取上下文getContext("2d")
  并使用它来绘制图形
*/
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    //添加Canvas，填充顶级窗口，添加Image，启用平滑，以改善缩放时的图像质量，设置image不显示.
    Canvas {
        anchors.fill:parent
        Image{
            id:myImage
            source: "qrc:/Image.png"
            visible: false
            smooth: true
        }
        onPaint: {
            var ctx = getContext("2d")
            //在坐标(0,0)处绘制宽度缩放0.5，高度缩放0.5的Image图像，将缩放系数从0.5改为0.2
            ctx.drawImage(myImage, 0, 0, myImage.width * 0.18, myImage.height * 0.18);
            ctx.translate(320, 240)  //将坐标原点移动至（320， 240） 这样后续所有的绘制操作，都会相对于新原点进行
            ctx.rotate(Math.PI/2)    //从坐标原点顺时针旋转90度
            ctx.beginPath()  //设置裁剪路径
            ctx.rect(0,0, 200,200)  //创建一个100*100的矩形作为剪裁区域
            ctx.clip()              //应用裁剪
            //将缩放系数从0.5改为0.2
            ctx.drawImage(myImage, 0, 0, myImage.width * 0.08, myImage.height * 0.08);

        }
    }
}
